<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
    <style>
        .size {
            display: inline-block;
            width: 100px;
        }
    </style>
  </head>
  <body>
    <h3>Process进度条</h3>

    <h4>基本实例</h4>
    <section>
        <div class="example">
            <div class="process-bar">
                <div class="process" style="width: 0%"></div>
            </div>
            <span class="percent">0%</span>
            <br><br>
            <div class="process-bar">
                <div class="process" style="width: 20%"></div>
            </div>
            <span class="percent">20%</span>
            <br><br>
            <div class="process-bar">
                <div class="process" style="width: 60%"></div>
            </div>
            <span class="percent">60%</span>
            <br><br>
            <div class="process-bar">
                <div class="process" style="width: 100%"></div>
            </div>
            <span class="percent">100%</span>
            <br><br>
            <div class="process-bar green">
                <div class="process" style="width: 0%"></div>
            </div>
            <span class="percent">0%</span>
            <br><br>
            <div class="process-bar green">
                <div class="process" style="width: 20%"></div>
            </div>
            <span class="percent">20%</span>
            <br><br>
            <div class="process-bar green">
                <div class="process" style="width: 60%"></div>
            </div>
            <span class="percent">60%</span>
            <br><br>
            <div class="process-bar green">
                <div class="process" style="width: 100%"></div>
            </div>
            <span class="percent">100%</span>
        </div>
        <pre class="html"><code>
    &lt;div class="process-bar"&gt;
        &lt;div class="process" style="width: 0%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;0%&lt;/span&gt;

    &lt;div class="process-bar"&gt;
        &lt;div class="process" style="width: 20%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;20%&lt;/span&gt;

    &lt;div class="process-bar"&gt;
        &lt;div class="process" style="width: 60%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;60%&lt;/span&gt;

    &lt;div class="process-bar"&gt;
        &lt;div class="process" style="width: 100%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;100%&lt;/span&gt;

    &lt;div class="process-bar green"&gt;
        &lt;div class="process" style="width: 0%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;0%&lt;/span&gt;

    &lt;div class="process-bar green"&gt;
        &lt;div class="process" style="width: 20%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;20%&lt;/span&gt;

    &lt;div class="process-bar green"&gt;
        &lt;div class="process" style="width: 60%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;60%&lt;/span&gt;

    &lt;div class="process-bar green"&gt;
        &lt;div class="process" style="width: 100%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;100%&lt;/span&gt;
        </code></pre>
    </section>
    <h4>不同粗细的进度条</h4>
    <section>
        <div class="example">
            <span class="size">Large</span>
            <div class="process-bar large">
                <div class="process" style="width: 60%"></div>
            </div>
            <span class="percent">60%</span>
            <br><br>
            <span class="size">Default</span>
            <div class="process-bar">
                <div class="process" style="width: 60%"></div>
            </div>
            <span class="percent">60%</span>
            <br><br>
            <span class="size">Small</span>
            <div class="process-bar small">
                <div class="process" style="width: 60%"></div>
            </div>
            <span class="percent">60%</span>
            <br><br>
            <span class="size">Mini</span>
            <div class="process-bar mini">
                <div class="process" style="width: 60%"></div>
            </div>
            <span class="percent">60%</span>
        </div>
        <pre class="html"><code>
    &lt;div class="process-bar large"&gt;
        &lt;div class="process" style="width: 60%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;60%&lt;/span&gt;

    &lt;div class="process-bar"&gt;
        &lt;div class="process" style="width: 60%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;60%&lt;/span&gt;

    &lt;div class="process-bar small"&gt;
        &lt;div class="process" style="width: 60%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;60%&lt;/span&gt;

    &lt;div class="process-bar mini"&gt;
        &lt;div class="process" style="width: 60%"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="percent"&gt;60%&lt;/span&gt;
        </code></pre>
    </section>
    <script>
        $(document).ready(function() {
            $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        });
    </script>
  </body>
</html>